import React, {useState, useRef} from 'react'
import {Input, Button, Tag, message} from 'antd'
export default function InputTag({values,onChange}) {
  const [value, setValue] = useState('')
  /** 确定按钮 */
  const changeHandler = (e) => {
    setValue(e.target.value)
  }
  const subHandler = () => {
    let str = value.trim()
    if(!str.length) return message.error('输入不能为空')
    const arr = str.replaceAll('，', ',').split(',')
    onChange(arr)
    setValue('')
  }
  const log = (index) => {
    onChange(index)
  }
  return (
    <div style={{width: 600, height: 500, margin: '20px auto'}}>
      <Input.Group compact>
        <Input style={{ width: 'calc(100% - 200px)'}} value={value} onChange={(e) => changeHandler(e)}/>
        <Button type="primary" onClick={subHandler}>确定</Button>
      </Input.Group>
      <div>
        <p>已输入{values.length}项, 还可以输入{500 - values.length }项</p>
        {
          values.map((item, index) =><Tag key={index} closable color={"#5ab4eb"} style={{marginRight: 10, marginTop: 10}}  onClose={() => log(index)}>{item}</Tag> )
        }
      </div>
    </div>
  )
}
